<script setup lang="ts">
import { ref } from 'vue';
import HotelNavCom from '@/components/hotel/HotelNavCom.vue';
import { showToast } from 'vant';
const showShare = ref(false);
const options = [
    { name: '微信', icon: 'wechat' },
    { name: '微博', icon: 'weibo' },
    { name: '复制链接', icon: 'link' },
    { name: '分享海报', icon: 'poster' },
    { name: '二维码', icon: 'qrcode' },
];

const onSelect = (option: any) => {
    showToast(option.name);
    showShare.value = false;
};
function showClick() {
    showShare.value = true;
}


function isshowClick(value: boolean) {
    showShare.value = value;
}
</script>


<template>
    <div class="hotel-detail">

        <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" @select="onSelect" />

        <transition name="fade">
            <HotelNavCom :isshow="showShare" @abc="isshowClick" />
        </transition>

        <div class="hotel-content">
            <header class="hotel-header">
                <van-image @click="$router.go(-1)"
                    src="https://cdn7.axureshop.com/demo2024/2251242/images/%E6%99%AF%E7%82%B9%E4%B8%BB%E9%A1%B5/u579.svg"></van-image>
                <van-image @click="showClick"
                    src="https://cdn7.axureshop.com/demo2024/2251242/images/%E6%99%AF%E7%82%B9%E4%B8%BB%E9%A1%B5/u577.svg"></van-image>
            </header>

            <main class="hotel-main">
                <div class="hotel-info">
                    <div class="left">
                        <p style="font-size: 22px;color: #333;font-weight: bold;">北京望京希尔顿欢朋酒店</p>
                        <p><span><van-image
                                    src="https://cdn7.axureshop.com/demo2024/2251242/images/%E9%85%92%E5%BA%97%E8%AF%A6%E6%83%85/u1471.svg"></van-image></span><span
                                style="font-size: 14px;color: #666;margin-left: 10px;">北京市朝阳区湖光中街甲六号</span><span
                                style="color: #6799f9;margin-left: 10px;">到这里</span>
                        </p>
                        <p><span><van-image
                                    src="https://cdn7.axureshop.com/demo2024/2251242/images/%E9%85%92%E5%BA%97%E8%AF%A6%E6%83%85/u1470.svg" /></span><span
                                style="font-size: 14px;color: #666;margin-left: 10px;">010-64788100</span>
                        </p>
                    </div>
                    <div class="right">
                        <van-image
                            src="https://cdn7.axureshop.com/demo2024/2251242/images/%E9%85%92%E5%BA%97%E8%AF%A6%E6%83%85/u1518.svg"></van-image>
                        <p>收藏</p>
                    </div>
                </div>

                <div class="hotel-date">
                    <div class="left">
                        <span><van-image
                                src="https://cdn7.axureshop.com/demo2024/2251242/images/%E9%85%92%E5%BA%97%E8%AF%A6%E6%83%85/u1476.svg"></van-image></span>
                        <span style="font-size: 16px;color: #333;margin-left: 10px;font-weight: bold;">11月15日</span>
                        <span style="font-size: 13px;color: #333;margin-left: 10px;">今天</span>
                    </div>
                    <p
                        style="padding: 5px; color: #333;background-color:  rgb(231, 227, 227); border-radius: 35px;margin-right: 10px;">
                        1晚上
                    </p>
                    <div class="right">
                        <span style="font-size: 16px;color: #333;font-weight: bold;">11月26日</span>
                        <span style="font-size: 13px;color: #333;margin-left: 10px;">明天</span>
                    </div>
                </div>

                <div class="hotel-card" v-for="item in 10">
                    <span><van-image style="margin-left: 15px;"
                            src="https://cdn7.axureshop.com/demo2024/2251242/images/%E9%85%92%E5%BA%97%E8%AF%A6%E6%83%85/u1479.svg"></van-image></span>
                    <span style="position: relative;right: 10px;">
                        <p style="font-size: 16px;color: #333;font-weight: bold;">特惠大床房</p>
                        <p style="color: #999;font-size: 12px;">
                            <span>不含早</span><span style="padding: 0 5px;">|</span><span>即时确认</span><span
                                style="padding: 0 5px;">|</span><span>不允许取消</span>
                        </p>
                        <p style="font-size: 14px;color: #d9001b;font-weight: bold;">￥<span
                                style="font-size: 20px;">625</span></p>
                    </span>
                    <button>预定</button>
                </div>
            </main>
        </div>
    </div>
</template>

<style scoped lang="scss">
.hotel-detail {
    width: 100%;
    height: 100%;

    .fade-enter-active,
    .fade-leave-active {
        transition: opacity 0.3s;
    }

    .fade-enter,
    .fade-leave-to {
        opacity: 0;
    }

    .hotel-content {
        width: 100%;
        height: 100%;
        background-color: rgba(247, 247, 247, 1);

        .hotel-header {
            width: 100%;
            height: 240px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-image: url('https://cdn7.axureshop.com/demo2024/2251242/images/%E9%85%92%E5%BA%97%E9%A2%84%E8%AE%A2/u1344-3.svg');
            background-size: cover;
            background-repeat: no-repeat;

            .van-image:nth-child(1) {
                margin-left: 20px;
                position: relative;
                bottom: 80px;
            }

            .van-image:nth-child(2) {
                margin-right: 20px;
                position: relative;
                bottom: 80px;
            }

        }

        .hotel-info {
            width: 100%;
            height: 130px;
            background-color: #fff;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
            bottom: 20px;
            border-radius: 10px;

            .left {
                margin-left: 15px;
            }

            .right {
                margin-right: 15px;
                text-align: center;
                position: relative;
                bottom: 10px;
            }
        }

        .hotel-date {
            background-color: #fff;
            width: 100%;
            height: 70px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-radius: 10px;
        }

        .hotel-card {
            width: 100%;
            height: 155px;
            background-color: #fff;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-radius: 10px;
            margin-top: 10px;

            button {
                color: white;
                background: linear-gradient(90deg, rgba(52, 120, 246, 1) 0%, rgba(2, 167, 240, 1) 99%);
                width: 50px;
                height: 30px;
                border-radius: 5px;
                border: 0;
                position: relative;
                right: 10px;
                top: 50px;
            }
        }
    }
}
</style>